<!--
 * @Author: libo
 * @Date: 2024-12-26 09:52:52
 * @LastEditors: libo
 * @LastEditTime: 2024-12-26 11:44:19
 * @FilePath: \图片预览viewerjs\index.html
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>Viewer.js</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/bootstrap@4/dist/css/bootstrap.min.css"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="./css/viewer.css" />
  </head>
  <body>
    <div class="container">
      <h1>Show a viewer dynamically on click a button</h1>
      <button type="button" class="btn btn-primary" id="button">
        Launch the demo
      </button>
      <ul id="images" style="display: none">
        <li><img src="./images/tibet-1.jpg" alt="Picture 1" /></li>
        <li><img src="./images/1.jpg" alt="Picture 1" /></li>
        <li><img src="./images/1.png" alt="Picture 1" /></li>
        <li><img src="./images/2.jpg" alt="Picture 1" /></li>
      </ul>
    </div>

    <script
      src="https://unpkg.com/jquery@3/dist/jquery.slim.min.js"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://unpkg.com/bootstrap@4/dist/js/bootstrap.bundle.min.js"
      crossorigin="anonymous"
    ></script>
    <script src="./js/viewer.js"></script>
    <script>
      window.addEventListener("DOMContentLoaded", function () {
        document
          .getElementById("button")
          .addEventListener("click", function () {
            var viewer = new Viewer(document.getElementById("images"), {
              button: false, // 右上角关闭按钮
              title: false, // 标题
              toolbar: {
                oneToOne: true,
                oneToOne: "large",
                prev: "large",
                // prev: function () {
                //   viewer.prev(true);
                // },
                // play: true,
                next: "large",
                // next: function () {
                //   viewer.next(true);
                // },
              },
              hidden: function () {
                  viewer.destroy();
                },
            });

            // image.click();
            viewer.show();
          });
      });
    </script>
  </body>
</html>
